import React, {useEffect, useState} from 'react';
import {Alert, Anchor, Button, Carousel, ConfigProvider, Divider, Popover, Spin, Statistic} from "antd";
import CateCard from "../../components/CateCard";
import MarketCard from "../../components/MarketCard";
import CompanyCard from "../../components/CompanyCard";
import {adShopAdForIndexList, env, indexList, indexSystemVisit, tjShopList} from "../../api";
import {useRequest} from "ahooks";
import {LoadingOutlined} from "@ant-design/icons";
import useStore from "../../store";
import {useNavigate} from "react-router-dom";


function Index(props) {

    const navigate = useNavigate();

    // 访问数据
    const [visitData, setVisitData] = useState({});
    const {loading: indexSystemVisitLoading, run: indexSystemVisitRun} = useRequest(indexSystemVisit, {
        pollingInterval: 5000,
        manual: true,
        onSuccess: (result, params) => {
            setVisitData(result.data)
        },
    });

    // 广告
    const [adList, setAdList] = useState([]);
    const {loading: adShopAdForIndexListLoading, run: adShopAdForIndexListRun} = useRequest(adShopAdForIndexList, {
        manual: true,
        onSuccess: (result, params) => {
            setAdList(result.data)
        },
    });
    // 推荐厂家
    const [tjShopData, setTjShopData] = useState([]);
    const {loading: tjShopListLoading, run: tjShopListRun} = useRequest(tjShopList, {
        manual: true,
        pollingInterval: 5000,
        onSuccess: (result, params) => {
            setTjShopData(result.data)
        },
    });


    // 分类信息
    const [marketList, setMarketList] = useState([]);
    const [psortList, setPsortList] = useState([]);
    const {loading: indexListLoading, run: indexListRun} = useRequest(indexList, {
        manual: true,
        onSuccess: (result, params) => {
            setMarketList(result.data.marketList)
            setPsortList(result.data.psortList)

        },
    });


    useEffect(() => {
        indexSystemVisitRun()
        adShopAdForIndexListRun()
        indexListRun()
        tjShopListRun()

    }, [])


    // 点击子分类跳转
    const clickChildCate = (parent, child) => {
        navigate(`/cateShopList/${parent.sort_name}/${child.sort_name}/${child.id}`)
    }
// 点击市场
    const clickMarket = (item) => {
        navigate(`/markerShopList/${item.s_name}/${item.l_name}/${item.id}`)

    }
    return (
        <div>



            {/*统计*/}
            <div className="mt-4  text-sm flex justify-between ">
                <div>已有{indexSystemVisitLoading ? <LoadingOutlined/> :
                    <span className="text-red-500 ">{visitData.visit_num}</span>}次访客
                </div>
                <div>共{indexSystemVisitLoading ? <LoadingOutlined/> :
                    <span className="text-red-500 ">{visitData.search_num}</span>}次搜索
                </div>
            </div>


            {/*轮播图*/}

            <div className="mt-4   ">
                <Spin indicator={<LoadingOutlined spin/>} size="large" spinning={adShopAdForIndexListLoading}>
                    <Carousel className="h-52" arrows infinite draggable fade autoplay>

                        {adList.map(item => <div className="h-52"><img className="size-full cursor-pointer "
                                                                       key={item.id}
                                                                       src={item.picture}
                                                                       alt={item.ad_name}
                                                                       title={item.ad_name}
                        /></div>)}
                    </Carousel>
                </Spin>


            </div>
            {/*产品分类*/}
            <div id="shop-cate" className="flex flex-col mt-4 ">
                <Divider orientation='left' children={<span>产品分类</span>}/>
                <Spin
                    indicator={<LoadingOutlined style={{fontSize: 48}} spin/>}
                    spinning={indexListLoading}
                >


                    <div className="mt-2 grid grid-cols-3  md:grid-cols-8">
                        {psortList.map(item =>
                            <div key={item.id} className="mt-2"><CateCard data={item} onChildCate={clickChildCate} /></div>
                        )}
                    </div>


                </Spin>
            </div>

            {/*厂商市场*/}
            <div id="shop-market" className="flex flex-col mt-4   ">
                <Divider orientation='left' children={<span>厂商市场</span>}/>

                <Spin
                    indicator={<LoadingOutlined style={{fontSize: 48}} spin/>}
                    spinning={indexListLoading}
                >
                    <div className="mt-2 grid grid-cols-3  md:grid-cols-8">
                        {marketList.map(item => <div key={item.id} className="mt-2"> <MarketCard onClickMarket={clickMarket} data={item} key={item.id}/> </div>)}
                    </div>
                </Spin>


            </div>


            {/*推荐厂商*/}
            <div id='recommend-shop' className="flex flex-col mt-4   ">
                <Divider orientation='left' children={<span>推荐厂商</span>}/>
                <Spin
                    indicator={<LoadingOutlined style={{fontSize: 48}} spin/>}
                    spinning={tjShopListLoading}
                >
                    <div className="mt-2 ">
                        {tjShopData.map(item => <div className="mt-2" key={item.id}> <CompanyCard data={item} /></div>)}
                    </div>
                </Spin>
            </div>

            {/*固定定位菜单*/}
            <div className="fixed top-32 right-24">
                <Anchor
                    affix={false}
                    items={[
                        {
                            key: '1',
                            href: '#shop-cate',
                            title: '产品分类',
                        },
                        {
                            key: '2',
                            href: '#shop-market',
                            title: '厂商市场',
                        },
                        {
                            key: '3',
                            href: '#recommend-shop',
                            title: '推荐厂商',
                        },

                    ]}
                />
            </div>


        </div>
    );
}

export default Index;